<template>
  <div class="box partner-node-collect">
    <div v-if="loading">加载中...</div>
    <div v-else>
      <div class="header">
        <div class="title">合作商点位数Top5</div>
        <svg-icon name="more" class="more" @click="handleMoreClick" />
      </div>
      <el-row :gutter="20" type="flex" align="middle" class="body">
        <el-col :span="17">
          <partner-node-collect-pie-chart :chart-option="pieChartOption" />
        </el-col>
        <el-col :span="7">
          <div class="collect">
            <div class="count">{{ nodeCount }}</div>
            <div class="name">点位数</div>
            <div class="count count2">{{ partnerCount }}</div>
            <div class="name">合作商数</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import PartnerNodeCollectPieChart from './partner-node-collect-pie-chart.vue';
import { getData } from '@/api/manage/partner';

// 定义变量
const pieChartOption = ref({
  seriesData: [],
});
const loading = ref(true); // 初始加载状态为 true
const nodeCount = ref(0); // 点位数
const partnerCount = ref(0); // 合作商数

// 定义方法
const getList = async () => {
  try {
    const response = await getData();
    pieChartOption.value.seriesData = response;
    partnerCount.value = pieChartOption.value.seriesData.length;
    nodeCount.value = 0;
    for (const data of pieChartOption.value.seriesData) {
      nodeCount.value += data.value;
    }

    // 将数据保存到 localStorage
    localStorage.setItem('chartData', JSON.stringify(response));
  } catch (error) {
    console.error("Error fetching data:", error);
  } finally {
    loading.value = false;
  }
};

// 在组件挂载时从 localStorage 读取数据
onMounted(async () => {
  const cachedData = localStorage.getItem('chartData');
  if (cachedData) {
    pieChartOption.value.seriesData = JSON.parse(cachedData);
    partnerCount.value = pieChartOption.value.seriesData.length;
    nodeCount.value = pieChartOption.value.seriesData.reduce((sum, data) => sum + data.value, 0);
    loading.value = false;
  } else {
    await getList();
  }
});
</script>
<style scoped>
.partner-node-collect{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(40vh - 48px);
    min-height: 353px;
    background: #fff;
    border-radius: 20px
}

.partner-node-collect .body{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.partner-node-collect .body .chart{
    padding-top: 16px
}

.partner-node-collect .body .collect{
    width: 154px;
    height: 230px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat
}

.partner-node-collect .body .collect .count{
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #072074;
    line-height: 33px
}

.partner-node-collect .body .collect .count2{
    margin-top: 20px
}

.partner-node-collect .body .collect .name{
    height: 17px;
    margin-top: 6px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #000412;
    line-height: 17px
}

.partner-node-collect .more {
    color: #5f84ff;
    cursor: pointer
}
</style>
